<template>
<!--    地图页面-->
       <div class="amap-page-container" :style="{width:'100%',height:'84%'}" >
           <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
               <el-amap-marker v-for="(item,key) in markers" :position="item.location" :key="key" :resizeEnable=true :zoom="zoom" :icon="item.icon"
                               :draggable="true"
                               :events="item.markerEvents"
               :scrollWhell=true></el-amap-marker>
           </el-amap>
       </div>
</template>
<script>
 export default {
      data(){
          const self = this;
          return {
            markers:[],
            station: [],
            clickable:true,
              zoom:"",
            show:false,
            center: [0,0],
            lng: 0,
            lat:0,
              gettime:"",
            loaded: false,
            plugin: [{
              enableHighAccuracy: true,//是否使用高精度定位，默认:true
              timeout: 100,          //超过10秒后停止定位，默认：无穷大
              maximumAge: 0,           //定位结果缓存0毫秒，默认：0
              convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true,        //显示定位按钮，默认：true
              buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
              showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fasle
              extensions:'all',
              pName: 'Geolocation',
              events: {
                init(o) {
                  // o 是高德地图定位插件实例
                  o.getCurrentPosition((status, result) => {
                    if (result && result.position) {
                      self.lng = result.position.lng;
                      self.lat = result.position.lat;
                      self.center = [self.lng, self.lat];
                      self.$store.commit("place",self.center)
                      self.Bus.$emit("turn",self.center)
                      self.loaded = true;
                      self.$nextTick();
                    }
                  });
                }
              }
            }]
          }
        },
     created() {
     this.Bus.$on("coordinate",(data)=>{
      this.center = data.center
         this.markers = data.markers
     })
     },
     beforeRouteLeave(to, from, next) {
         to.meta.keepAlive = true
         next()
     },
     methods: {
      }
      }
</script>

<style  lang="scss" scoped>
    .van-image__img{
        width: 3rem;
        height: 3rem;
    }
    .van-image--round{
        margin-left: 0.3rem;
    }
    .amap-page-container{
        z-index: 9999;
    }
    .amap-demo {
        height:100%;
    }
</style>